import React from 'react';
import _ from 'lodash';
import { Col, Button, Row, Icon } from 'antd';
import AuthorizedButton from '@/components/AuthorizedButton';

const Btns = props => {
  const { BtnsList, rowAttribute } = props;

  return (
    <Row {...rowAttribute}>
      {BtnsList && !_.isEmpty(BtnsList)
        ? _.map(BtnsList, element => {
            if (element.authority) {
              return (
                <AuthorizedButton authority={element.authority} key={element.value}>
                  <Col {...element.colAttribute}>
                    <Button {...element.btnAttribute}>
                      {element.beforIcon ? <Icon type={element.beforIcon} /> : null}
                      {element.value}
                      {element.afterIcon ? <Icon type={element.afterIcon} /> : null}
                    </Button>
                  </Col>
                </AuthorizedButton>
              );
            }
            return (
              <Col {...element.colAttribute} key={element.value}>
                <Button {...element.btnAttribute}>
                  {element.beforIcon ? <Icon type={element.beforIcon} /> : null}
                  {element.value}
                  {element.afterIcon ? <Icon type={element.afterIcon} /> : null}
                </Button>
              </Col>
            );
          })
        : null}
    </Row>
  );
};

export default Btns;
